<template>
	<view class="wrap">
		<u-form :model="dataForm" ref="uForm">
			<u-form-item label-position="left" label="我的姓名:" prop="applicantName" label-width="20%">
				<u-input v-model="dataForm.applicantName"/>
			</u-form-item>
			<u-form-item label-position="left" label="我的性别:" prop="applicantGender" label-width="20%">
				<u-radio-group v-model="dataForm.applicantGender" slot="right">
					<u-radio v-for="(item, index) in applicantGenderList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="宠物经验:" prop="applicantLesson" label-width="20%">
				<u-radio-group v-model="dataForm.applicantLesson" slot="right">
					<u-radio v-for="(item, index) in applicantLessonList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="婚姻状况:" prop="applicantMarriage" label-width="20%">
				<u-radio-group v-model="dataForm.applicantMarriage" slot="right">
					<u-radio v-for="(item, index) in applicantMarriageList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="住房情况:" prop="applicantHoursing" label-width="20%">
				<u-radio-group v-model="dataForm.applicantHoursing" slot="right">
					<u-radio v-for="(item, index) in applicantHoursingList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="工作状态:" prop="applicantWorkStatus" label-width="20%">
				<u-radio-group v-model="dataForm.applicantWorkStatus" slot="right">
					<u-radio v-for="(item, index) in applicantWorkStatusList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="养宠经验:" prop="applicantLesson" label-width="20%">
				<u-radio-group v-model="dataForm.applicantLesson" slot="right">
					<u-radio v-for="(item, index) in applicantLessonList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="我的职业:" prop="applicantWorkDes" label-width="20%">
				<u-input v-model="dataForm.applicantWorkDes"/>
			</u-form-item>
			<u-form-item label-position="left" label="我的年龄:" prop="type" label-width="20%">
				<text v-if="dataForm.applicantAge === ''" @click="applicantAgeShow = true;">请选择我的年龄</text>
				<text v-if="dataForm.applicantAge === 0" @click="applicantAgeShow = true;">60后</text>
				<text v-if="dataForm.applicantAge === 1" @click="applicantAgeShow = true;">70后</text>
				<text v-if="dataForm.applicantAge === 2" @click="applicantAgeShow = true;">80后</text>
				<text v-if="dataForm.applicantAge === 3" @click="applicantAgeShow = true;">90后</text>
				<text v-if="dataForm.applicantAge === 4" @click="applicantAgeShow = true;">00后</text>
				<u-picker mode="selector" v-model="applicantAgeShow" :default-selector="[0]" :range="applicantAgeList"
					range-key="name" @confirm="applicantAgeConfirm"></u-picker>
				<u-icon slot="right" name="arrow-right" @click="applicantAgeShow = true;"></u-icon>
			</u-form-item>
			<u-form-item label-position="left" label="已有宠物:" prop="type" label-width="20%">
				<text v-if="dataForm.applicantPets === ''" @click="applicantPetsShow = true;">请选择是否具有宠物</text>
				<text v-if="dataForm.applicantPets === 0" @click="applicantPetsShow = true;">猫咪</text>
				<text v-if="dataForm.applicantPets === 1" @click="applicantPetsShow = true;">狗狗</text>
				<text v-if="dataForm.applicantPets === 2" @click="applicantPetsShow = true;">猫狗双全</text>
				<text v-if="dataForm.applicantPets === 3" @click="applicantPetsShow = true;">暂无</text>
				<u-picker mode="selector" v-model="applicantPetsShow" :default-selector="[0]" :range="applicantPetsList"
					range-key="name" @confirm="applicantPetsConfirm"></u-picker>
				<u-icon slot="right" name="arrow-right" @click="applicantPetsShow = true;"></u-icon>
			</u-form-item>
			<u-form-item label-position="left" label="月收入:" prop="type" label-width="20%">
				<text v-if="dataForm.applicantIncome === ''" @click="applicantIncomeShow = true;">请选择月收入</text>
				<text v-if="dataForm.applicantIncome === 0" @click="applicantIncomeShow = true;">小于3千</text>
				<text v-if="dataForm.applicantIncome === 1" @click="applicantIncomeShow = true;">3千~6千</text>
				<text v-if="dataForm.applicantIncome === 2" @click="applicantIncomeShow = true;">6千~1万</text>
				<text v-if="dataForm.applicantIncome === 3" @click="applicantIncomeShow = true;">大于1万</text>
				<u-picker mode="selector" v-model="applicantIncomeShow" :default-selector="[0]" :range="applicantIncomeList"
					range-key="name" @confirm="applicantIncomeConfirm"></u-picker>
				<u-icon slot="right" name="arrow-right" @click="applicantIncomeShow = true;"></u-icon>
			</u-form-item>
			<u-form-item label-position="left" label="我的地址:" prop="applicantAddress" label-width="20%">
				<input v-model="dataForm.applicantAddress" type="text" placeholder-class="line" placeholder="省市区县、乡镇等"
					@click="showRegionPicker()" />
			</u-form-item>
			<u-form-item label-position="left" label="微信号:" prop="applicantWechat" label-width="30%">
				<u-input v-model="dataForm.applicantWechat" />
			</u-form-item>
			<u-form-item label-position="left" label="手机号:" prop="applicantPhone" label-width="30%">
				<u-input v-model="dataForm.applicantPhone" @click="clickShowKeyboard()" />
			</u-form-item>
			<u-form-item label-position="top" label="让送养人看到我的诚意:" prop="applicantMessage" label-width="30%">
				<u-input type="textarea" :border="true" placeholder="请输入想要说的话...:" v-model="dataForm.applicantMessage" />
			</u-form-item>
		</u-form>
		<u-button @click="submit" type="primary">提交</u-button>
		<u-picker mode="region" ref="uPicker" v-model="showRegion" @confirm="confirmRegionPicker" />
		<u-keyboard ref="uKeyboard" mode="number" v-model="showKeyboard" @change="changeShowKeyboard"
			@backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	import {
		submitAdoption
	} from '@/api/adoption/petAdoption.js'
	export default {
		data() {
			return {
				dataForm: {
					petSendId: '',
					ownerId: '',
					applicantId: '',
					applicantName: '',
					applicantGender: 0,
					applicantLesson: 0,
					applicantMarriage: 0,
					applicantHoursing: 0,
					applicantWorkStatus: 0,
					applicantLesson: 0,
					applicantWorkDes: '',
					applicantAge: '',
					applicantPets: '',
					applicantIncome: '',
					applicantAddress: '',
					applicantWechat: '',
					applicantPhone: '',
					applicantMessage: ''
				},
				applicantAgeShow: false,
				applicantPetsShow: false,
				applicantIncomeShow: false,
				showRegion: false,
				showKeyboard: false,
				applicantGenderList: [
					{
						name: '女生',
						value: 0,
						disabled: false
					},
					{
						name: '男生',
						value: 1,
						disabled: false
					}
				],
				applicantAgeList: [
					{
						name: '60后',
						value: 0,
						disabled: false
					},
					{
						name: '70后',
						value: 1,
						disabled: false
					},
					{
						name: '80后',
						value: 2,
						disabled: false
					},
					{
						name: '90后',
						value: 3,
						disabled: false
					},
					{
						name: '00后',
						value: 4,
						disabled: false
					}
				],
				applicantLessonList: [
					{
						name: '无经验',
						value: 0,
						disabled: false
					},
					{
						name: '有经验',
						value: 1,
						disabled: false
					}
				],
				applicantMarriageList: [
					{
						name: '单身',
						value: 0,
						disabled: false
					},
					{
						name: '恋爱中',
						value: 1,
						disabled: false
					},
					{
						name: '已婚',
						value: 2,
						disabled: false
					}
				],
				applicantHoursingList: [{
						name: '自由住房',
						value: 0,
						disabled: false
					},
					{
						name: '整租房',
						value: 1,
						disabled: false
					},
					{
						name: '合租',
						value: 2,
						disabled: false
					}
				],
				applicantWorkStatusList: [{
						name: '无业',
						value: 0,
						disabled: false
					},
					{
						name: '学生',
						value: 1,
						disabled: false
					},
					{
						name: '工作',
						value: 2,
						disabled: false
					},
					{
						name: '退休',
						value: 3,
						disabled: false
					}
				],
				applicantPetsList: [{
						name: '猫咪',
						value: 0,
						disabled: false
					},
					{
						name: '狗狗',
						value: 1,
						disabled: false
					},
					{
						name: '猫狗双全',
						value: 2,
						disabled: false
					},
					{
						name: '暂无',
						value: 3,
						disabled: false
					}
				],
				applicantIncomeList: [{
						name: '小于3千',
						value: 0,
						disabled: false
					},
					{
						name: '3千~6千',
						value: 1,
						disabled: false
					},
					{
						name: '6千~1万',
						value: 2,
						disabled: false
					},
					{
						name: '大于1万',
						value: 3,
						disabled: false
					}
				]
			}
		},
		onLoad(e) {
			this.dataForm.petSendId = e.petSendId
		},
		methods: {
			applicantAgeConfirm(e) {
				console.log(e)
				this.dataForm.applicantAge = this.applicantAgeList[e].value
				console.log(this.dataForm.applicantAge)
			},
			applicantPetsConfirm(e) {
				this.dataForm.applicantPets = this.applicantPetsList[e].value
			},
			applicantIncomeConfirm(e) {
				this.dataForm.applicantIncome = this.applicantIncomeList[e].value
			},
			showRegionPicker() {
				this.showRegion = true;
			},
			confirmRegionPicker(e) {
				this.dataForm.applicantAddress = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			clickShowKeyboard() {
				this.showKeyboard = true;
			},
			changeShowKeyboard(val) {
				this.dataForm.applicantPhone += val;
			},
			backspace() {
				// 删除value的最后一个字符
				if (this.dataForm.applicantPhone.length) {
					this.dataForm.applicantPhone = this.dataForm.applicantPhone.substr(0, this.dataForm.applicantPhone.length - 1);
				}
			},
			submit() {
				console.log(this.dataForm)
				submitAdoption(this.dataForm).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '已成功提交！',
							icon: 'success'
						});
						this.dataForm = {}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						});
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}
</style>